<template>
  <button :class="className">
    <slot />
  </button>
</template>
<script>
export default {
  name: 'ComButton',
  props: {
    xs: Boolean,
    sm: Boolean,
    md: Boolean,
    lg: Boolean
  },
  setup(props) {
    const className = []
    if (props.xs) className.push('xs')
    if (props.sm) className.push('sm')
    if (props.md) className.push('md')
    if (props.lg) className.push('lg')
    return {
      className
    }
  }
}
</script>
<style lang="scss" scoped>
button {
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  background-color: $color-theme;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  border: none;
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  font-size: 15px;
  .xs {
    height: 20px;
    line-height: 20px;
    padding: 0 4px;
    font-size: 12px;
  }
  .sm {
    height: 28px;
    line-height: 28px;
    padding: 0 8px;
    font-size: 14px;
  }
  .md {
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    font-size: 15px;
  }
  .lg {
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    font-size: 16px;
  }
  :disabled {
    background-color: $color-theme-d;
  }
  :hover {
    opacity: 0.85;
  }
}
</style>
